<template>
    <div class="dialog_content">
        <el-table class="dialog_content_table"  @row-click="monitorStore.savepicture" :data="data.data.monitoring_index" height="100%">
            <el-table-column prop="date" label="开赛时间" width="75">
                <template #default="scope">
                    <div>{{ scope.row.minfo.match_time }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="赛事">
                <template #default="scope">
                    <div class="flex_column">
                        <div style="
                height: 16px;
                line-height: 16px;
                font-size: 11px;
                color: #8a8a8a;
              ">
                            {{ scope.row.minfo.league_name }}
                        </div>
                        <div class="flex_column" style="font-size: 12px; color: #000">
                            <div class="hidden1" style="height: 16px; line-height: 16px">
                                {{ scope.row.minfo.home_name }}
                            </div>
                            <div class="hidden1" style="height: 16px; line-height: 16px">
                                {{ scope.row.minfo.away_name }}
                            </div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="盘口" width="60">
                <template #default="scope">
                    <div class="font12 bold">{{ scope.row.pk_odds_key_ch }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="指数" width="60" align="center">
                <template #default="scope">
                    <div class="bold" style="color: #e92937;">{{ scope.row.odd.toFixed(2) }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="涨/跌幅" sortable width="60" align="center">
                <template #header="{ column }">
                    <div class="flex">
                        <div>涨/跌幅</div>
                    </div>
                </template>
                <template #default="scope">
                    <div class="flex">
                        <div class="bold" style="color: #e92937;">{{ scope.row.odd_nums }}</div>
                        <img v-if="scope.row.odd_nums >= 0" src="@/assets/monitor/up.png" alt=""
                            style="width: 16px; height: 16px;margin-left: 4px" />
                        <img v-if="scope.row.odd_nums < 0" src="@/assets/monitor/down.png" alt=""
                            style="width: 16px; height: 16px;margin-left: 4px" />
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="功能" width="50" align="center">
                <template #default="scope">
                    <div class="flex">
                        <img v-if="scope.row.collector == 0" src="@/assets/monitor/shoucang.png" alt=""
                            style="width: 16px; height: 16px; cursor: pointer"
                            @click="monitorStore.clickCollect(scope.row)" />
                        <img v-if="scope.row.collector == 1" src="@/assets/monitor/shoucang-active.png" alt=""
                            style="width: 16px; height: 16px; cursor: pointer"
                            @click="monitorStore.clickCancelcollect(scope.row)" />
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
const { monitorStore, monitorState } = inject('MonitorStore')
const props = defineProps({
    data: Object,
    dataindex: Number
})
</script>

<style lang="scss" scoped>
.dialog_content {
    height: calc(100% - 56px);
    padding: 8px;
}
</style>

<style>
.dialog_content_table .el-table__border-left-patch {
    width: 0;
}

.dialog_content_table thead tr th {
    background-color: #f8f9fa !important;
}

.dialog_content_table .el-table__body-wrapper {
    background: #fff;
}

.dialog_content_table thead tr th .cell {
    font-size: 12px;
    font-weight: 600;
    color: #000;
    padding: 0 4px;
}

.dialog_content_table tbody tr td .cell {
    font-size: 12px;
    color: #000;
    padding: 0 4px;
}

.dialog_content_table .caret-wrapper {
    display: none;
}
</style>
